/*
 *
 * (c) Copyright Ascensio System Limited 2010-2023
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/


@import "../base.less";
@import "params.less";

.advanced-selector-select {
    display: inline-block;
    cursor: pointer;
    padding-right: 12px;
    position: relative;

    &.disabled {
        color: #83888d;
        cursor:default;
    }

    &:after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #666;
        content: "";
        height: 0;
        position: absolute;
        right: 0;
        top: 50%;
        width: 0;
        margin-top: -1px;
    }
}

.advanced-selector-container {
    display: none;
    height: 283px;
    left: 0;
    position: absolute;
    z-index: 1000;
    .boxShadow(4px);
    .borderRadius(4px);
    .noneSelect();

    &.onechosen {
        .advanced-selector-block {
            border-bottom: none;
        }

        .advanced-selector-list-items .advanced-selector-list li {
            cursor: pointer;
        }
    }
}


.advanced-selector-list-block {
    float: left;
    padding: 10px 10px 13px 10px;
}

.advanced-selector-add-link,
.advanced-selector-add-new-link {
    cursor: pointer;
    padding-left: 18px;
    position: relative;

    &:after {
        color: #83888d;
        content: "+";
        cursor: pointer;
        display: block;
        font-size: 22px;
        font-weight: 800;
        height: 20px;
        line-height: 20px;
        left: 1px;
        margin-top: -11px;
        position: absolute;
        top: 50%;
        width: 12px;
    }
}

.advanced-selector-add-text,
.advanced-selector-add-new-text {
    border-bottom: 1px dotted @textColor;
}

.advanced-selector-block {
    border-bottom: 1px solid @borderColor;
    position: relative;
}

.advanced-selector-block-list {
    float: left;
    margin-top: 35px;
    margin-left: 12px;
    width: 195px;

    &:first-child {
        margin-top: 0;
        margin-left: 0;
    }
}

.advanced-selector-search {
    margin: 0 0 12px 0;
    position: relative;
}
input[type="text"].advanced-selector-search-field,
input[type="text"].advanced-selector-search-field:focus {
    border: solid 1px @borderColor2;
    font-size: 12px;
    height: 21px;
    padding: 0 25px 0 5px;
    width: 163px;
}
.advanced-selector-search-btn {
    height: 16px;
    position: absolute;
    right: 5px;
    top: 4px;
    width: 16px;
}
.advanced-selector-search-btn:before{content: " "; position: absolute; width: 7px; height: 7px; border: 2px solid #AFAFAF; .borderRadius(7px); top: 1px; left: 1px; }
.advanced-selector-search-btn:after{content: " "; position: absolute; width: 0; height: 6px; border-right: 2px solid #AFAFAF; top: 9px; left: 11px; .rotateTransform(135deg); }


.advanced-selector-reset-btn {
    background: url(./images/close.png) 0 0 no-repeat transparent;
    display: none;
    cursor: pointer;
    height: 16px;
    position: absolute;
    right: 5px;
    top: 4px;
    width: 16px;
}

.advanced-selector-add-new-link {
    display: inline-block;
    margin: 6px 0 6px 4px;
    height: 18px;
}

.advanced-selector-list {
    height: 154px;
    list-style-type: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;

    li {
        cursor: default;
        padding: 0 0 0 8px;
        height: 30px;
        display: flex;
        align-items: center;
        text-align: left;

        &.selected {
            background-color: @activeTable;
        }

        &:hover, &.active {
            background-color: @hoverTable;
        }

        &.disabled {
            display: none !important;
        }

        input {
            float: left;
            margin: 2px 3px 3px 0;
            vertical-align: top;
        }
    }

    img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 0 8px 0 0;
    }
}

.div-check() {
    div {
        background-color: transparent;
        background-image: url("images/@{checkboxes-img}");
        background-position: 0px 0px;
        background-repeat: no-repeat;
        margin: 0 8px 0 0;
        height: 14px;
        width: 14px;
        border: 0 none;
        padding: 0;

        &.checked {
            background-position: -14px 0px;
        }

        &.indeterminate {
            background-position: -28px 0px;
        }
    }

    label {
        display: block;
        flex: 1;
        .text-overflow();
    }
}

.advanced-selector-list-items,
.advanced-selector-list-groups {
    li {
        .div-check();

        &.pending {
            color: #83888d;
        }
    }
}

.advanced-selector-all-select {
    .div-check();

    padding: 0 0 0 8px;
    height: 30px;
    display: flex;
    align-items: center;

    &:hover {
        background-color: @hoverTable;
    }

    input {
        float: left;
        margin: 2px 3px 0 0;
        vertical-align: top;
    }

    label {
        display: block;
        .text-overflow();
    }
}

/*********Add New Container *********/
.advanced-selector-add-new-block {
    border-right: 1px solid @borderColor;
    float: left;
    height: 260px;
    padding: 10px 10px 13px 10px;
    width: 195px;

    &.right-position {
        border-left: 1px solid @borderColor;
        border-right: none;
    }
}

.advanced-selector-add-new-fields {
    margin-top: -8px;
}

.advanced-selector-title {
    font-weight: bold;
    margin-bottom: 2px;
}
.advanced-selector-field-wrapper {
    position: relative;

    &.error {
        .advanced-selector-field-error {
            display: block;
        }

        input, select {
            border-color: #c00;
        }
    }
}

.advanced-selector-field-error {
    color: #c00;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
}
.advanced-selector-field {
    border: solid 1px @borderColor2;
    font-size: 12px;
    height: 21px;
    margin-bottom: 3px;
    padding: 0 5px;
    width: 183px;

    &:last-child {
        margin-bottom: 0;
    }
}
select.advanced-selector-field {
    height: 23px;
    padding-right: 0;
    padding-left: 2px;
    width: 195px;
}

.advanced-selector-btn-cnt {
    bottom: 14px;
    position: absolute;

    button {
        margin: 0;
    }
}

.advanced-selector-selected-count {
    color: #999;
    position: absolute;
    bottom: -17px;
    right: 0;
}

.advanced-selector-list-items,
.advanced-selector-list-groups {
    height: 154px;
    position: relative;
}

.advanced-selector-list-groups li.chosen label,
.advanced-selector-all-select.chosen label {
    font-weight: bold;
}

.advanced-selector-loader-list {
    background: url("images/@{loader-gif-32}") no-repeat 0 0 transparent;
    height: 32px;
    width: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -16px 0 0 -16px;
}

.advanced-selector-no-results,
.advanced-selector-empty-list,
.advanced-selector-no-items,
.advanced-selector-no-groups {
    color: #83888d;
    display: none;
    float:left;
    margin-top: 4px;
    white-space: normal;
}

.advanced-selector-loader {
    background: url("images/@{loader-gif-16}") no-repeat scroll 0 0 transparent;
    color: #999999;    
    font-size:11px;
    line-height: 18px;
    padding-left: 22px;
    position: absolute;
    top: -21px;
    left: 0;
}
.advanced-selector-server-error {
    color: #c00;
    left: 0;
    position: absolute;
    .text-overflow();
    top: -24px;
    width: 200px;
}
/*-------Selector for list -------*/
.advanced-selector-field-search {
    position: relative;

    .advanced-selector-field {
        padding-right: 25px;
        width: 163px;
    }
}

.advanced-selector-field-list {
    background-color: @body-color;
    border: 1px solid #ccc;
    display: none;
    max-height: 70px;
    left: 0;
    list-style-type: none;
    margin: 0;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    top: 22px;
    width: 193px;
    z-index: 1000;

    li {
        cursor: pointer;
        margin: 0;
        padding: 3px 10px;
        .text-overflow();

        &.selected {
            background-color: @activeTable;
        }

        &:hover, &.active {
            background-color: @hoverTable;
        }
    }
}


.advanced-selector-field-loader {
    position: absolute;
    top:2px;
    left:2px;
    height: 16px;
    background: url("images/@{loader-gif-16}") no-repeat left center transparent;
}

.advanced-selector-list-results {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    max-width: 400px;

    li {
        position: relative;

        .result-name {
            max-width: 400px;
            display: inline-block;
            .text-overflow();
        }

        .reset-icon {
            position: absolute;
            top: 50%;
            margin-top: -9px;
            right: -39px;
        }

        &:hover .reset-icon {
            background-position: bottom center;
        }
    }
}


.advanced-selector-select-result .result-name,
.advanced-selector-select-result .reset-icon{
    float: left;
}
.advanced-selector-everyone {
    cursor: default;
    padding: 4px 0;
}
.advanced-selector-everyone input {
    vertical-align: top;
}